mixin flip-loop()
  -var {url: coverUrl, width, height} = images[0]
  -contentUrl = images[1].url
  section(style=`margin-bottom:0;overflow:hidden;font-size:0;line-height:0;pointer-events:none;user-select:none;
  background:url("${coverUrl}") 0 0/100% 100% no-repeat;
  -webkit-tap-highlight-color:transparent;visibility:visible`)
    section(style=`height:0;visibility:visible`)
      svg(viewBox=`0 0 ${width} ${height}`, style=`display:block;width:100%;margin-top:-1px;pointer-events:none;user-select:none;-webkit-tap-highlight-color:transparent;
        max-width:none!important;visibility:visible`)
        animate(calcMode=`discrete`, attributeName=`width`, values=`100%;100%;200%;200%`, dur=`2s`, keyTimes=`0;0.5;0.5;1`, fill=`freeze`, begin=`click`)
        animate(calcMode=`discrete`, attributeName=`width`, values=`200%;200%;100%;100%`, dur=`2s`, keyTimes=`0;0.6;0.6;1`, fill=`freeze`, begin=`touchstart`)
        animate(calcMode=`discrete`, attributeName=`width`, values=`200%;200%;200%;200%`, dur=`2s`, keyTimes=`0;0.6;0.6;1`, fill=`freeze`, begin=`touchmove`)
        g(style=`visibility:visible`)
          animateTransform(calcMode=`discrete`, attributeName=`transform`, type=`scale`, values=`1;1;0.5;0.5`, dur=`2s`, keyTimes=`0;0.5;0.5;1`, fill=`freeze`, begin=`click`)
          animateTransform(calcMode=`discrete`, attributeName=`transform`, type=`scale`, values=`0.5;0.5;1;1`, dur=`2s`, keyTimes=`0;0.6;0.6;1`, fill=`freeze`, begin=`touchstart`)
          animateTransform(calcMode=`discrete`, attributeName=`transform`, type=`scale`, values=`0.5;0.5;0.5;0.5`, dur=`2s`, keyTimes=`0;0.6;0.6;1`, fill=`freeze`, begin=`touchmove`)
          g(transform=`translate(540 0)`, style=`visibility:visible`)
            g(style=`visibility:visible`)
              animateTransform(calcMode=`spline`, attributeName=`transform`, type=`scale`, values=`1 1;-1 1`, dur=`1s`, keyTimes=`0;1`, keySplines=`.42,0,.58,1`, fill=`freeze`, begin=`click`)
              animateTransform(calcMode=`spline`, attributeName=`transform`, type=`scale`, values=`-1 1;-1 1;1 1`, dur=`1.2s`, keyTimes=`0;0.166666;1`, keySplines=`.42,0,.58,1;.42,0,.58,1`, fill=`freeze`, begin=`touchstart`)
              animateTransform(calcMode=`spline`, attributeName=`transform`, type=`scale`, values=`-1 1;-1 1;-1 1`, dur=`1.2s`, keyTimes=`0;0.166666;1`, keySplines=`.42,0,.58,1;.42,0,.58,1`, fill=`freeze`, begin=`touchmove`)
              g(transform=`translate(-540 0)`, style=`visibility:visible`)
                g(transform=`translate(1080 0) scale(-1 1)`, style=`visibility:visible`)
                  foreignObject(x=`0`, y=`0`, width=`${width}`, height=`${height}`, style=`visibility:visible`)
                    svg(viewBox=`0 0 ${width} ${height}`, style=`display:block;width:100%;margin-top:0;background:url("${contentUrl}") 0 0/100% 100% no-repeat;pointer-events:none;user-select:none;-webkit-tap-highlight-color:transparent;visibility:visible`)
                g(style=`visibility:visible`)
                  animate(calcMode=`linear`, attributeName=`opacity`, values=`1;1;0;0`, dur=`1s`, keyTimes=`0;0.5;0.5;1`, fill=`freeze`, begin=`click`)
                  animate(calcMode=`linear`, attributeName=`opacity`, values=`0;0;1;1`, dur=`1s`, keyTimes=`0;0.7;0.7;1`, fill=`freeze`, begin=`touchstart`)
                  animate(calcMode=`linear`, attributeName=`opacity`, values=`0;0;0;0`, dur=`1s`, keyTimes=`0;0.7;0.7;1`, fill=`freeze`, begin=`touchmove`)
                  g(style=`visibility:visible`)
                    foreignObject(x=`0`, y=`0`, width=`${width}`, height=`${height}`, style=`visibility:visible`)
                      svg(viewBox=`0 0 ${width} ${height}`, style=`display:block;width:100%;margin-top:0;background-image:url("${coverUrl}");
                      background-size:100% 100%;background-position:0 0;background-repeat:no-repeat;pointer-events:none;user-select:none;
                      -webkit-tap-highlight-color:transparent;visibility:visible`)
                  g(style=`font-size:30px`)
                    text(x=`30`, y=`1840`, fill=`#fff`, text-anchor=`left`)
                      tspan some text
                  g(attributeName=`transform`, type=`translate`, values=`0 0;0 0;-10000 0;-10000 0`, dur=`2s`, keyTimes=`0;0.5;0.5;1`, fill=`freeze`, begin=`click`)
                    animateTransform(calcMode=`discrete`, attributeName=`transform`, type=`translate`, values=`-10000 0;-10000 0;0 0;0 0`, dur=`2s`, keyTimes=`0;0.6;0.6;1`, fill=`freeze`, begin=`touchstart`)
                    animateTransform(calcMode=`discrete`, attributeName=`transform`, type=`translate`, values=`-10000 0;-10000 0;-10000 0;-10000 0`, dur=`2s`, keyTimes=`0;0.6;0.6;1`, fill=`freeze`, begin=`touchmove`)
                    g
                      rect(x=`0`, y=`0`, width=`${width}`, height=`${height}`, fill=`#39f`, opacity=`0`, style=`pointer-events:visible`)
                        animate(attributeName=`x`, dur=`1s`, fill=`remove`, restart=`always`, values=`-88888888`, begin=`click`)
                    g(transform=`translate(10000 0)`)
                      g( attributeName=`transform`, type=`translate`, values=`10000 0;10000 0;10000 0`, dur=`1.2s`, keyTimes=`0;0.00001;1`, fill=`remove`, begin=`touchstart`)
                        animateTransform(calcMode=`discrete`, attributeName=`transform`, type=`translate`, values=`0 0;0 0;0 0`, dur=`1.2s`, keyTimes=`0;0.00001;1`, fill=`remove`, begin=`touchmove`)
                        rect(x=`0`, y=`0`, width=`${width}`, height=`${height}`, fill=`#000`, opacity=`0`, style=`pointer-events:visible`)
      section(style=`height:0;transform:rotate(180deg)`)
        svg(viewBox=`0 0 ${width} ${height}`, style=`transform:rotate(180deg);display:block;width:100%;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent`)
          g(opacity=`0`)
            rect(x=`0`, y=`0`, width=`${width}`, height=`${height}`, style=`pointer-events:visible`, fill=`blue`)
            animateTransform(calcMode=`discrete`, attributeName=`transform`, type=`translate`, values=`10000 0;10000 0;10000 0`, dur=`0.4s`, keyTimes=`0;0.00001;1`, fill=`remove`, begin=`touchstart`)
            animateTransform(calcMode=`discrete`, attributeName=`transform`, type=`translate`, values=`0 0;0 0;0 0`, dur=`0.4s`, keyTimes=`0;0.00001;1`, fill=`remove`, begin=`touchmove`)
    svg(viewBox=`0 0 ${width} ${height}`, style=`display:block;width:100%;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent`)
